<template>
  <div class="content">
      <!-- 搜索狂 -->
      <div class="search">
        <el-input placeholder="请输入输入想去的地方，比如‘广州’" v-model="citySearch" >
            <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
        <span class="search-bottom-word">推荐：广州 上海 北京</span>
      </div>
      <!-- 推荐旅游的头部 -->
      <div class="con-header">
            <el-row type="flex">
                <el-col :span="5"  class="con-header-word">推荐攻略</el-col>
                <el-col :span="5" :push="15">
                    <el-button type="primary" icon="el-icon-edit" @click.native="turnToWrite">写游记</el-button>
                </el-col>
            </el-row>
      </div>
      <!-- 中间文章 -->
      <div class="container">
          <div class="container-article" v-for="(item, index) in udateArticleList" :key="index">
              <h4 @click="turnToDetails(item.id)">{{item.title}}</h4>
              <p class="textOVerThree" v-html="item.summary" @click="turnToDetails(item.id)">

              </p>
              <el-row class="container-imgs" type="flex">
                  <el-col :span="8" v-for="(img,idx) in item.images" :key="idx"><img :src="img" alt="" @click="turnToDetails(item.id)"></el-col>
              </el-row>
              <div class="article-status">
                  <el-row type="flex">
                      <el-col :span="8">
                        <i class="el-icon-location-information"></i>
                            {{item.cityName}}
                         <img :src="`http://157.122.54.189:9093${item.account.defaultAvatar}`" alt="">
                            {{item.account.nickname}}
                        <i class="el-icon-view">{{item.watch}}</i>
                      </el-col>
                      <el-col :span="5" :push=14>
                          <div class="like">
                            {{item.like}} 👍
                           </div>
                      </el-col>
                  </el-row>
              </div>
          </div>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[3, 5, 10, 15]"
            :page-size="pagesize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            >
         </el-pagination>
      </div>
      <!-- 分页部分 -->

  </div>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      citySearch: '',
      articleList: [],
      udateArticleList: [],
      total: 0,
      pagesize: 3,
      currentPage: 1
    }
  },
  watch: {
    articleList () {
      this.update()
    }
  },
  methods: {
    update () {
      const start = (this.currentPage - 1) * this.pagesize
      const end = (this.currentPage * this.pagesize)
      console.log(start, end)
      this.udateArticleList = this.articleList.slice(start, end)
      console.log(this.udateArticleList)
    },
    handleSizeChange (size) {
      console.log(size)
      this.pagesize = size
      this.update()
    },
    handleCurrentChange (curPage) {
      console.log(curPage)
      this.currentPage = curPage
      this.update()
    },
    turnToDetails (id) {
      this.$router.push({
        path: '/post/details',
        query: {
          id: id
        }
      })
    },
    turnToWrite () {
      this.$router.push('/post/write')
    }
  },
  mounted () {
    this.$http.get('/posts').then(res => {
      console.log(res.data)
      this.articleList = res.data.data
      this.total = res.data.total
    })
  }
}
</script>

<style lang="less" scoped>
.content{
    .search{
        width: 700px;
        .el-input{
            width: 100%;
            border-right: 0;
            border: 3px solid orange;
            border-radius: 5px;
        }
        /deep/.el-input-group__append{
            background-color: transparent;
            border-left:0 ;
        }
        .search-bottom-word{
            display: block;
            font-size: 10px;
            margin-top: 10px;
        }
    }
    .con-header{
        width: 100%;
        height: 50px;
        line-height: 50px;
        .con-header-word{
            color:orange;
            font-size:20px;
            position: relative;
            &::after{
                position: absolute;
                content: '';
                display: block;
                height: 3px;
                width: 80px;
                background-color: orange;
            }
        }
        &::after{
            content: '';
            display: block;
            height: 1px;
            width: 100%;
            margin-top: 10px;
        }
    }
    .container{
        margin-top: 20px;
        width: 700px;
        .container-article{
            font-size:15px ;
            min-height: 150px;
            margin-bottom: 40px;
            position: relative;
            h4,
            p,
            img{
                cursor: pointer;
            }
            h4{
                font-size: 25px;
                padding: 10px 0;
            }
            p{
                font-size: 15px;
                margin: 10px 0;
            }
            &::after{
                content: '';
                display: block;
                height: 1px;
                width: 100%;
                background-color: rgb(168, 166, 166);
                position: absolute;
                top: -15px;
            }
            .textOVerThree {
                display: -webkit-box;
                overflow: hidden;
                white-space: normal !important;
                text-overflow: ellipsis;
                word-wrap: break-word;
                -webkit-line-clamp: 3;
                -webkit-box-orient: vertical
            }
        }

        .container-imgs{
            .el-col{
                width: 220px;
                height: 150px;
                overflow: hidden;
                position: relative;
                img{
                    width: 100%;
                    height:100%;
                    position: absolute;

                }
            }
        }
        .article-status{
            margin-top: 10px;
            img{
                width: 20px;
            }
        }
    }
}
</style>
